<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Taco Design</title>
    <link rel="stylesheet" th:href="@{/styles.css}">
</head>
<body>
    <h1>Design your taco</h1>
    <img th:src="@{/images/TacoCloud.png}"/>
    <form method="POST" th:action="@{/logout}" id="logoutForm">
        <input type="submit" value="Logout"/>
    </form>

    <form method="post" th:object="${design}">
        <div class="grid">
            <span class="validationError" th:if="${#fields.hasErrors('ingredients')}" th:errors="*{ingredients}">Ingredient Error</span>
            <div class="ingredient-group" id="wraps">
                <h3>Designate your wrap:</h3>
                <div th:each="ingredient : ${wrap}">
                    <input name="ingredients" type="checkbox" th:value="${ingredient.id}"/>
                    <span th:text="${ingredient.name}">INGREDIENT</span><br/>
                </div>
            </div>

            <div class="ingredient-group" id="proteins">
                <h3>Designate your proteins:</h3>
                <div th:each="ingredient : ${protein}">
                    <input name="ingredients" type="checkbox" th:value="${ingredient.id}"/>
                    <span th:text="${ingredient.name}">INGREDIENT</span><br/>
                </div>
            </div>

            <div class="ingredient-group" id="cheeses">
                <h3>Designate your cheeses:</h3>
                <div th:each="ingredient : ${cheese}">
                    <input name="ingredients" type="checkbox" th:value="${ingredient.id}"/>
                    <span th:text="${ingredient.name}">INGREDIENT</span><br/>
                </div>
            </div>

            <div class="ingredient-group" id="veggies">
                <h3>Designate your veggies:</h3>
                <div th:each="ingredient : ${veggies}">
                    <!--th:value，用法：th:value="${brand.name}"，(用对象对name值替换value属性)-->
                    <input name="ingredients" type="checkbox" th:value="${ingredient.id}"/>
                    <span th:text="${ingredient.name}">INGREDIENT</span><br/>
                </div>
            </div>

            <div class="ingredient-group" id="sauces">
                <h3>Designate your sauce:</h3>
                <div th:each="ingredient : ${sauce}">
                    <input name="ingredients" type="checkbox" th:value="${ingredient.id}"/>
                    <span th:text="${ingredient.name}">INGREDIENT</span><br/>
                </div>
            </div>
        </div>


        <h3>Name your taco creation ooo</h3>
        <!--th:field，用法：th:field="*{name}"，(用来绑定后台对象和表单数据)-->
        <input type="text" th:field="*{name}"/>  <!--*{name}表示是从th:object design中取出的字段，并会保存-->
        <span class="validationError" th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Street Error</span>
        <button>Submit your taco</button>
    </form>
</body>
</html>